<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="onSearch"
        @reset="
          () => {
            (fontTxt = ''), onSearch();
          }
        "
      >
        <template slot="toolForm">
          <a-form-item label="图标名称">
            <a-input
              style="width:100%"
              v-model="fontTxt"
              :placeholder="$ct('icon', '图标名称')"
            />
          </a-form-item>
        </template>
      </tool-bar>

      <a-tabs v-model="currentIndex" @change="changeCurrentIndex">
        <a-tab-pane :tab="$ct('AntdIconLibrary', 'Ant Design图标库')" key="1">
          <ul>
            <li
              v-for="(icon, index) in antdJsonList"
              :key="icon.icon_id"
              @click="copyLink(index)"
            >
              <icon-fonts
                :icon="'icon-' + icon.font_class"
                :title="icon.name"
                data-clipboard-action="copy"
                :class="[
                  'cobyOrderSn' + index,
                  { active: activeIndex === icon.font_class },
                ]"
                :data-clipboard-text="icon.font_class"
              />
            </li>
          </ul>
        </a-tab-pane>
        <a-tab-pane :tab="$ct('officialIconOfAli', '阿里官方图标')" key="2">
          <ul>
            <li
              v-for="(icon, index) in iconJsonList"
              :key="icon.icon_id"
              @click="copyLink(index)"
            >
              <icon-fonts
                :icon="'icon-' + icon.font_class"
                :title="icon.name"
                data-clipboard-action="copy"
                :class="[
                  'cobyOrderSn' + index,
                  { active: activeIndex === icon.font_class },
                ]"
                :data-clipboard-text="icon.font_class"
              />
            </li>
          </ul>
        </a-tab-pane>
        <a-tab-pane :tab="$ct('multiColorIcon', '多色图标')" key="3">
          <ul>
            <li
              v-for="(icon, index) in multicolorList"
              :key="icon.icon_id"
              @click="copyLink(index)"
            >
              <icon-fonts
                :icon="'icon-' + icon.font_class"
                :title="icon.name"
                data-clipboard-action="copy"
                :class="[
                  'cobyOrderSn' + index,
                  { active: activeIndex === icon.font_class },
                ]"
                :data-clipboard-text="icon.font_class"
              />
            </li>
          </ul>
        </a-tab-pane>
        <a-tab-pane :tab="$ct('privateFont', '私有图标')" key="4">
          <ul>
            <li
              v-for="(icon, index) in privateFontList"
              :key="icon.icon_id"
              @click="copyLink(index)"
            >
              <icon-fonts
                :icon="'icon-' + icon.font_class"
                :title="icon.name"
                data-clipboard-action="copy"
                :class="[
                  'cobyOrderSn' + index,
                  { active: activeIndex === icon.font_class },
                ]"
                :data-clipboard-text="icon.font_class"
              />
            </li>
          </ul>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import fontPicker from "@/components/TopVUI/font/fontPicker.vue";
import fontJson from "@/components/TopVUI/font/json/font.json";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import iconJson from "@/components/TopVUI/font/json/icon.json";
import antdJson from "@/components/TopVUI/font/json/antd.json";
import multicolor from "@/components/TopVUI/font/json/multicolor.json";
import privateFontJson from "@/components/TopVUI/font/json/privateFont.json";

export default {
  name: "FontAwesomeIcons",
  components: {
    fontPicker,
    FontAwesomeIcon,
  },
  data() {
    return {
      value: "",
      showJson: [],
      iconJsonList: [],
      antdJsonList: [],
      multicolorList: [],
      privateFontList: [],
      currentIndex: "1",
      activeIndex: "",
      fontTxt: "",
    };
  },
  // created() {
  //   this.showJson = fontJson;
  //   this.iconJsonList = iconJson;
  //   this.antdJsonList = antdJson;
  //   this.multicolorList = multicolor;
  //   this.currentIndex = "1";
  // },
  mounted() {
    this.iconJsonList = iconJson;
    this.antdJsonList = antdJson;
    this.multicolorList = multicolor;
    this.privateFontList = privateFontJson;
  },
  methods: {
    // 复制图标
    copyLink(index) {
      let _this = this;
      let clipboard = new this.clipboard(".cobyOrderSn" + index);
      clipboard.on("success", function() {
        _this.$message.success(_this.$ct("copySucceeded", "复制成功！"));
      });
      clipboard.on("error", function() {
        _this.$message.success(_this.$ct("copyFailed", "复制失败！"));
      });
      setTimeout(() => {
        clipboard.destroy();
      }, 10);
    },
    fontClick(item) {
      this.activeIndex = item.font_class;
    },
    onSearch() {
      let val = this.fontTxt;
      if (this.currentIndex === "1") {
        this.antdJsonList = antdJson.filter(
          (item) => item.font_class.indexOf(val) >= 0
        );
      } else if (this.currentIndex === "2") {
        this.iconJsonList = iconJson.filter(
          (item) => item.font_class.indexOf(val) >= 0
        );
      } else if (this.currentIndex === "3") {
        this.multicolorList = multicolor.filter(
          (item) => item.font_class.indexOf(val) >= 0
        );
      } else {
        this.privateFontList = privateFontJson.filter(
          (item) => item.font_class.indexOf(val) >= 0
        );
      }
    },
    changeCurrentIndex(key) {
      this.currentIndex = key;
      this.onSearch(this.fontTxt);
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/components/TopVUI/icon/Icon";
.icons-list {
  .anticon {
    margin-right: 6px;
    font-size: 24px;
  }
}
.font-container {
  font-size: 18px;
  width: 100%;
  padding-left: 20px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
.my-font {
  cursor: pointer;
  margin: 0 20px 20px 0;
  min-width: 250px;
  /* padding: 0 5px; */
  padding-top: 5px;
  text-align: left;
}
.my-font:hover {
  background-color: rgba(206, 206, 206, 0.5);
}
.more-info {
  border: 0;
  margin: 16px;
}
ul {
  max-height: calc(100vh - 287px) !important;
}
</style>
